<template>
  <div class="attention-dialog">
    <hr class="demarcation-line"/>
    <div class="attention-search">
      <form class="search-content">
        <el-input
          type="text"
          maxlength="100"
          placeholder="请输入用户名称或音秀号"
          prefix-icon="el-icon-search"
          style="color: #e7e7e7"
          v-model="keyword"
        ></el-input>
      </form>
      <el-button style="background: #161823; border: none; color: #fff" @click="searchDataListFun()"
        >搜索</el-button
      >
    </div>
    <div class="attention-penson">
      <ul>
        <li v-for="item in dataList" :key="item.friendId">
          <div>
            <img :src="item.friendAvatar" class="attention-photo" />
          </div>
          <div class="attention-left">
            <p class="attention-left-name">{{ item.friendName }}</p>
            <p class="attention-left-content">
              个人标签：{{ item.friendSignature }}
            </p>
          </div>
          <div class="attention-btn">
           <div v-if="type == 1">
             <el-button type="info" size="small" plain>已关注</el-button>
           </div>
           <div v-else>
            <el-button
          :class="[follow ? 'concern-friend' : 'unconcern-person',
          ]"
          plain
          size="small"
          @click="changeCorcern()"
          ><template>{{
           follow ? "相互关注" : "回关"
          }}</template></el-button
        ><el-button type="info" size="small" plain>移除</el-button>
          </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { searchFollowListApi, searchFansListApi } from "@/api/user";
import { getFollowListApi } from "@/api/follow";
import { getFansListApi } from "@/api/fans";
export default {
  data() {
    return {
      follow:true,
      keyword: "",
      page: 1,
      userInfo: this.$store.state.userInfo,
    };
  },
  props: ["dataList", "type"],
  created() {
    // this.followListFun();
    // this.fansListFun();
  },
  methods: {
    changeCorcern(){
this.follow=!this.follow;
    },
    searchDataListFun() {
      if (this.type == 1) {
        searchFollowListApi({
          userId: this.userInfo.userId,
          keyword: this.keyword,
          page: this.page,
        }).then((res) => {
          if (res.data.code == 200) {
            this.dataList = res.data.data;
          }
        });
      } else {
        searchFansListApi({
          userId: this.userInfo.userId,
          keyword: this.keyword,
          page: this.page,
        }).then((res) => {
          if (res.data.code == 200) {
            this.dataList = res.data.data;
          }
        });
      }
    },
  },
};
</script>

<style>
.attention-search {
  display: flex;
  margin-bottom: 10px;
}
.attention-search .el-button {
  border-radius: 0 4px 4px 0;
}
.search-content .el-input__inner {
  border-radius: 4px 0 0 4px;
}
.attention-penson ul li:last-child {
  border-bottom: none;
}
.attention-penson ul li {
  height: 70px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #333536;
}
.attention-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.attention-left {
  margin-left: 10px;
  line-height: 1.8;
}
.attention-left-name {
  color: #fff;
}
.attention-left-content {
  font-size: 14px;
}
.attention-btn {
  margin-left: auto;
}
.attention-btn .el-button--info.is-plain {
  background: #4f4f50;
  border: none;
}
.demarcation-line {
    margin-bottom: 12px;
    height: 1px;
    background-color: #373434;
    border: none;
}
.concern-friend {
  background: #4f4f4f;
  color: #a1a1a2;
  border: none;
}

.unconcern-person {
  background: red;
  color: #fff;
  border: none;
}
.concern-friend:hover{
  background: #4f4f4f !important;
  color: #a1a1a2 !important;
  border: none;
}
.unconcern-person:hover {
  background: red !important;
  color: #fff !important;
  border: none;
}
.concern-friend:focus{
  background: #4f4f4f !important;
  color: #a1a1a2 !important;
  border: none;
}
.unconcern-person:focus {
  background: red !important;
  color: #fff !important;
  border: none;
}
</style>
